<!-- 登陆页面 -->
<template>
  <div id="login">
    <div class="login-body">
      <div class="container">
        <div class="container-header">
          <span class="login-type"
                :class="{'active1':loginWay}"
                @click="loginWay=true">手机登陆
          </span>
          <span class="login-type"
                :class="{'active2':loginWay===false}"
                @click="changeLoginWay">账号登陆
          </span>
          <span class="hr" />
        </div>
        <div class="container-body">
          <div v-show="!loginWay">
            <el-input v-model="passwordLogin.userStr.userName"
                      class="input"
                      placeholder="请输入用户名"
                      clearable />
            <el-input v-model="passwordLogin.userStr.userPwd"
                      class="input"
                      placeholder="请输入密码"
                      show-password />
            <div class="yanzhengma">
              <el-input
                v-model="passwordLogin.verifyCodeActual"
                class="yanzhengma-input"
                placeholder="请输入验证码" />
              <div class="yanzhengma-img">
                <img ref="captcha"
                     src="/o2o/kaptcha/kaptcha.jpg"
                     @click="changeCaptcha">
              </div>
            </div>
          </div>
          <div v-show="loginWay">
            <el-input v-model="phoneLogin.userStr.userPhone"
                      class="input"
                      type="tel"
                      placeholder="请输入手机号码" />
            <el-input v-model="phoneLogin.smsCode"
                      class="input phone-code"
                      placeholder="请输入手机验证码" 
                      size="small" />
            <el-button size="small"
                       @click="getCode">
              {{ computedTime ? `已发送(${computedTime}s) ` : "发送验证码" }}
            </el-button>
          </div>
          <div class="remember-register">
            <span @click="$router.push('/forgetPwd')">忘记密码</span>/
            <span @click="$router.push({path:'/register'})">注册</span>
          </div>
          <div style="clear:both;" />
          <div class="gologin">
            <el-button round
                       @click="login">
              登陆
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { loginByUserName, loginByPhone } from '@/api/useroperation';
  import { sendMessage } from '@/api/phone';

  export default {
    name: 'login',
    data() {
      return {
        passwordLogin: {
          userStr: {
            userName: '',
            userPwd: '',
          },
          verifyCodeActual: '',
        },
        phoneLogin: {
          smsCode: '',
          userStr: {
            userPhone: '',
          },
        },
        loginWay: true,
        computedTime: null, // 倒计时
        intervalId: null, // 验证码定时器
      };
    },
    methods: {
      changeLoginWay() {
        this.loginWay = !this.loginWay;
      },
      login() {
        if (!this.loginWay) {
          // 用户密码登录
          const { userStr, verifyCodeActual } = this.passwordLogin;
          if (!userStr.userName || !userStr.userPwd || !verifyCodeActual) {
            this.$message.error('用户名、密码或验证码不能为空');
            return;
          }
          loginByUserName(this.passwordLogin).then(data => {
            if (data.success) {
              sessionStorage.setItem('userName', data.user.userName);
              this.$root.$children[0].$refs.header.$emit('login');
              this.$router.push('/');
            } else {
              this.$message.error(data.errMsg);
              this.changeCaptcha();
            }
          });
        } else {
          // 手机登录
          const { smsCode, userStr } = this.phoneLogin;
          if (!/^\d{11}$/.test(userStr.userPhone)) {
            this.$message.error('手机号码格式不正确!');
            return;
          }
          if (!smsCode) {
            this.$message.error('验证码不为空!');
            return;
          }
          const params = {
            smsCode,
            userStr,
          };
          loginByPhone(params).then(data => {
            if (data.success) {
              sessionStorage.setItem('userName', data.user.userName);
              this.$root.$children[0].$refs.header.$emit('login');
              this.$router.push('/');
            } else {
              this.$message.error(data.errMsg);
            }
          });
        }
      },
      getCode() {
        const { userStr } = this.phoneLogin;
        if (!/^\d{11}$/.test(userStr.userPhone)) {
          this.$message.error('手机号码格式不正确!');
          return;
        }
        // 如果当前没有计时
        if (!this.computedTime) {
          // 启动计时
          this.computedTime = 60;
          this.intervalId = setInterval(() => {
            this.computedTime--;
            if (this.computedTime <= 0) {
              clearInterval(this.intervalId);
            }
          }, 1000);
          // 发ajax请求, 向手机号发验证码
          const { userPhone } = userStr;
          sendMessage({ userPhone });
          this.$message.success('验证码发送成功，请注意查看手机');
        }
      },
      changeCaptcha() {
        this.$refs.captcha.src = `http://localhost:8080/o2o/kaptcha/kaptcha.jpg?${Date.now()}`;
      },
    },
  };
</script>
<style lang='scss' scoped>
#login {
  height: 490px;
  background: url("../assets/images/register.jpg") no-repeat top center;
  .login-body {
    width: 12rem;
    margin: 0 auto;
    position: relative;
    .container {
      position: absolute;
      width: 3.6rem;
      top: 0.6rem;
      right: 1rem;
      background: #fff;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
      .container-header {
        position: relative;
        width: 2.7rem;
        font-size: 0.2rem;
        height: 0.7rem;
        line-height: 0.7rem;
        letter-spacing: 0.02rem;
        margin: 0.2rem auto;
        border-bottom: 2px solid #eee;
        .login-type {
          margin: 0 0.2rem;
          cursor: pointer;
          &:nth-child(1):hover {
            color: #ff651b;
            & ~ .hr {
              left: 0;
            }
          }
          &:nth-child(2):hover {
            color: #ff651b;
            & ~ .hr {
              left: 1.3rem;
            }
          }
        }
        .active1 {
          color: #ff651b;
          & ~ .hr {
            left: 0;
          }
        }
        .active2 {
          color: #ff651b;
          & ~ .hr {
            left: 1.3rem;
          }
        }
        .hr {
          position: absolute;
          display: block;
          margin: 0;
          width: 1.35rem;
          border: 2px solid #ff651b;
          transition: left 1s;
          left: 0;
          bottom: -3px;
        }
      }
      .container-body {
        width: 2.7rem;
        margin: 0 auto;
        .input {
          margin-bottom: 0.15rem;
        }
        .phone-code {
          width: 1.35rem;
          margin-right: 0.15rem;
        }
        .yanzhengma {
          margin-bottom: 0.05rem;
          position: relative;
          .yanzhengma-input {
            width: 1.6rem;
          }
          .yanzhengma-img {
            position: absolute;
            bottom: 0;
            display: inline-block;
            width: 1.07rem;
            height: 38px;
            border: 1px solid #eee;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        .remember-register {
          float: right;
          span {
            color: #666;
            margin-right: 0.05rem;
          }
        }
        .gologin {
          margin-top: 0.1rem;
          button {
            width: 2.7rem;
            height: 0.45rem;
            margin-bottom: 0.2rem;
            font-size: 0.2rem;
            font-weight: bold;
            color: #fff;
            background: #ff651b;
          }
        }
      }
    }
  }
}
</style>
